<template>
	<view class="pad-30">
		<view class="bg_color_fff betweenX pad-30 radius10">
			<view>答题卡</view>
			<view class="time">{{ timeText }}</view>
		</view>

		<view class="bg_color_fff mar-top-30 pad-30 pad-top-100 swiper">
			<view class="index"> <text class="color-main">{{ current + 1 }}</text> / {{ answerList.length }}</view>
			<view class="type" v-if="questionType == 1">单选题</view>
			<view class="type" v-if="questionType == 2">多选题</view>
			<view class="type" v-if="questionType == 3">判断题</view>
			<swiper :current="current" :style="{ height: swiperHeight + 'px' }" class="swiper" @change="changeSwiper">
				<swiper-item class="swiper-box" v-for="(item, index) in answerList" :key="index">
					<view class="etmHights">
						<view class="title">{{ item.stem }}</view>
						<view>
							<view v-for="(info, inx) in item.option" :class="item.select.includes(inx) ? 'select' : ''"
								class="swiper-item" @tap="hanldeChoice(item, inx)">
								{{ info }}
							</view>
						</view>

						<view class="button-box mar-left-10 mar-right-10">
							<!-- 未答题 -->
							<template v-if="item.res == '' || item.res == undefined">
								<up-button v-if="answerList.length == index + 1" @click="hanldeSubQuestion(item, index)"
									type="primary " class="mar-top-20" text="提交考题"></up-button>
								<up-button v-else @click="hanldeSubQuestion(item, index)" type="primary "
									class="mar-top-20" text="确定"></up-button>
							</template>
							<!-- 已答题 -->
							<template v-else>
								<up-button v-if="answerList.length != index + 1" @click="hanldeNext" type="success"
									class="mar-top-20" text="下一题"></up-button>
							</template>
						</view>

						<!-- 正确答案 -->
						<view class="da-bg" v-if="item.res">
							<view>
								正确答案：<text class="css">[{{ item.answer }}]</text> 您选了 <text
									class="orr">[{{ item.res.answer }}]</text>
							</view>
							<view class="flex mar-top-30">
								答题解析： <text v-html="item.analysis"></text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
import {
	reactive,
	ref,
	onMounted,
	getCurrentInstance,
	watch
} from 'vue';

// 接口引入
import {
	startTest,
	subQuestion,
	finishTurn
} from '/config/api.js';

import {
	onLoad,
} from '@dcloudio/uni-app';

import {
	toast
} from '@/uni_modules/uview-plus'

const instance = getCurrentInstance();
// 轮播index
const current = ref(0);

// 使用 reactive 创建响应式数组  
const answerList = ref([]);
const questionType = ref(1);
let timeText = ref('')
let dataInfo = '';
// 获取详情
const getInfoData = () => {
	startTest({
		id: infoId.value,
	}).then(res => {

		dataInfo = res.data;

		// 判断做到拿到题了
		current.value = dataInfo.number;
		answerList.value = res.data.list.map(item => {
			// 判断是做过这个题
			if (item.res == '' || item.res == undefined) {
				item.select = [];
			} else {
				let arrText = item.res.answer.split(',');
				item.select = stringToNumber(arrText)
			}
			return item;
		});


		// 开始计时
		let seconds = 0;

		// 考试总时长（秒）
		let totalSeconds = dataInfo.test.txamination_time * 60;

		// 当前时间（秒）
		let newTime = parseInt(new Date().getTime() / 1000);

		// 开始时间（秒）
		let startTime = dataInfo.start_time;

		// 重新开始考试
		if (newTime - startTime > totalSeconds) {
			seconds = 0;
		} else {
			seconds = newTime - startTime;
		}

		setInterval(() => {
			++seconds;
			// 重新出发接口
			if (seconds == totalSeconds) {
				seconds = 0;
			}
			timeText.value = formatTime(seconds);
		}, 1000);

		questionType.value = res.data.list[0].question_type;
	})
}

// 组装时分秒

const formatTime = (seconds) => {
	var hours = (Math.floor(seconds / 3600) < 10) ? '0' + Math.floor(seconds / 3600) : Math.floor(seconds / 3600);
	var minutes = (Math.floor((seconds % 3600) / 60) < 10) ? '0' + Math.floor((seconds % 3600) / 60) : Math.floor((
		seconds % 3600) / 60);
	var remainingSeconds = (seconds % 60) < 10 ? '0' + seconds % 60 : seconds % 60;
	return hours + ": " + minutes + ": " + remainingSeconds;
}


// 轮播dom
const boxRef = ref(null);
// 轮播切换监听
const changeSwiper = (e) => {
	let index = e.detail.current;
	current.value = index;
	questionType.value = answerList.value[index].question_type;
	getItemHeight()
}

// 窗口高度
const windowHeight = ref()
// 动态设置高度
const swiperHeight = ref(800)

// 获取元素高度
function getItemHeight() {
	let query = uni.createSelectorQuery().in(instance);
	query.select(".etmHights").boundingClientRect(data => {

		// 如果 窗口高度 - （顶部距离 + 底部距离 ）小于 100 则 元素本身高度 + 100
		if (windowHeight.value - (data.top + data.bottom) < 100) {
			swiperHeight.value = data.height + 100;
		}

		// 如果 窗口高度 - （顶部距离 + 底部距离 ）大于 100 则 元素本身高度 加 剩余高度
		if (windowHeight.value - (data.top + data.bottom) > 100) {
			swiperHeight.value = data.height + (windowHeight.value -
				(data.top + data.bottom))
		}
	}).exec();
}

// 开始选择
const hanldeChoice = (item, inx) => {

	// 已经做过当前题了
	if (item.res) {
		return
	};

	switch (item.question_type) {
		case 1:
		case 3: // 单选 & 判断
			if (!item.select.includes(inx)) {
				item.select[0] = inx;
			} else {
				item.select[0] = [];
			}
			break;
		case 2: // 多选
			if (!item.select.includes(inx)) {
				item.select.push(inx);
			} else {
				// 找到同样的移出
				let index = item.select.indexOf(inx);
				item.select.splice(index, 1);
			}
			break;
	}
}

// 提交当前做的题
const hanldeSubQuestion = (item, index) => {

	// 未做出选项
	if (item.select.length == 0) {
		toast('已经是最后一题了')
		return
	}

	// 最后一道题提交
	if (index + 1 == answerList.value.length) {
		finishTurn({
			order_no: dataInfo.info.order_no,
		}).then(res => {

		})
	}

	// 当前题分数
	let score = '';
	switch (item.question_type) {
		case 1:
			score = dataInfo.test.single_score
			break;
		case 2:
			score = dataInfo.test.many_score
			break;
		case 3:
			score = dataInfo.test.judge_score;
			break;
	}

	// 判断这道题的正确性
	let status = 200;
	if (item.answer === numbersToLetters(item.select).join(',')) {
		status = 100;
	}

	let data = {
		id: item.id,
		test_id: dataInfo.test.id,
		status: status,
		answer: numbersToLetters(item.select).join(','),
		score: score,
		order_no: dataInfo.info.order_no,
	}

	subQuestion(data).then(res => {
		item.res = res.data.res;
	})
}

// 下一题
const hanldeNext = () => {
	if (answerList.value.length == current.value + 1) {
		toast('已经是最后一题了')
		return
	}
	current.value = ++current.value;
}

// ABC 转 数字
const stringToNumber = (str) => {
	return str.map(letter => {
		return (parseInt(letter, 36) - 10)
	});
}

// 123 转 ABC
const numbersToLetters = (numbers) => {
	return numbers.map(function (n) {
		return String.fromCharCode(n + 65);
	});
}


const infoId = ref('');
// 页面加载中
onLoad((param) => {
	infoId.value = param.id;
	getInfoData();
})

// vue 加载完成
onMounted(async () => {
	uni.getSystemInfo({
		success(res) {
			windowHeight.value = res.windowHeight
		},
	})

	setTimeout(() => {
		getItemHeight()
	}, 800);
})
</script>

<style scoped lang="scss">
page {
	background: #f5f5f5;
}

.time {
	color: #ff6b00;
}

.swiper {
	position: relative;

	.index {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}
}

.swiper-item {
	background-color: #f9f9f9;
	margin-top: 20rpx;
	padding: 30rpx;
	box-sizing: border-box;
	height: 100%;
}

.swiper-box {
	height: 100%;
}

.type {
	width: 140rpx;
	height: 50rpx;
	line-height: 50rpx;
	background-color: #2c8eff;
	position: absolute;
	top: 30rpx;
	left: 0rpx;
	color: white;
	font-size: 28rpx;
	border-radius: 0 20rpx 20rpx 0;
	padding-left: 20rpx;
}

.select {
	background-color: #f2f8ff;
	color: #2c8eff;
}

.da-bg {
	background: rgba(0, 0, 0, .1);
	border-radius: 10rpx;
	margin-top: 30rpx;
	padding: 30rpx;
	box-sizing: border-box;
}

.css {
	color: #19be6b;
}

.orr {
	color: #2c8eff;
}
</style>